<template>
	<view class="circle">
		
		<view class="user-info" >
			<!-- 背景透明层 -->
			<view class="transparent "></view>
			<view class="cover">
				<image :src="cirdetail.cover" mode="aspectFill" ></image>	
			</view>
			<!-- 邀请用户进入圈子 -->
			<view class="popup">
				<prompt ref='customModal' :modalTitle="modalTitle" @onClickConfirm="onConfirm"></prompt>
			</view>
			<!-- 发布打卡 -->
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="add-post" v-if="!phone">
				<image src="/static/images/post/post-add.svg" mode="aspectFill"></image>
			</button>
			<button  @tap.stop="goPost" hover-class="none" class="add-post" v-else>
				<image src="/static/images/post/post-add.svg" mode="aspectFill"></image>
			</button>
			
			<view  class="prompt"  @tap="prompt" v-if="mid == cirdetail.user_id">
				<image src="/static/images/icon/invite2cir.png" mode="aspectFill"></image>
			</view>
			
			<view class="base-info">
				<view class="" v-if="isshowbtn">
					<button type="primary" @click="joinCir" hover-class="none" class="create" v-if="flag">加入</button>
					<button type="primary" @click="quitCir" hover-class="none" class="create" v-else>退出</button>
				</view>
				<view class="user-desc">
					<image :src="cirdetail.logo" mode="aspectFill" class="avatar"></image>
					<view class="circle-desc">
						<view class="name">{{cirdetail.name}}</view>	
						<view class="bio" v-if="cirdetail.allintro == ''">圈子描述：什么都没有留下喔~</view>
						<view class="bio" v-else>圈子描述：{{cirdetail.allintro}}</view>
						<view class="count">
							<view class="number">{{cirdetail.user_num}}人参加</view>
							<view class="vLine"></view>
							<view class="posted">{{cirdetail.posted}}次打卡</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>	
		
		<!--headlines-->
		<view class="tui-rolling-news list-item">
			<tui-icon name="news" :size="22" color="#555"></tui-icon>
			<swiper :vertical="true" :autoplay="true" :circular="true" :interval="2500" class="tui-swiper">
				<swiper-item class="tui-news-item tui-swiper-item" v-if="cirdetail.activities.length == 0"@tap.stop="tip">活动公告待发布ing,敬请关注喔~</swiper-item>
				<swiper-item v-for="(item, index) in cirdetail.activities" :key="index" class="tui-swiper-item"   @tap.stop="goActList(item.id)">
					<view class="tui-news-item">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>
		<!--headlines-->
		
		
		<!-- 选项框 -->
		<view class="select-tab">
			<view class="tabs" style="width: 50%; margin: 0 auto;background: #fff;">
				<v-tabs  padding="4px 0px"  v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px"/>
			</view>
		</view>
		
		<!--1. 打卡动态列表 -->
		<view class="" v-if="activeTab == 0">
			<view class="" v-if="cirdetailpost.length > 0">
				<card :postsRecord="cirdetailpost" :unshowcirtag="unshowcirtag" :cangodetail="cangodetail" :isshowcomment="isshowcomment"></card>
			</view>
			<!-- 没有动态 -->
			<view class="none-post" v-if="cirdetailpost == 0">
				还没有人发布动态喔~_~
			</view>
		</view>
		
		
		<!--2. 排行榜 -->
		<view class="" v-if="activeTab == 1">
			<view class="rank">
				
				<!-- 排序方式 -->
				<view class="rank-manner">
					<!--下拉选择框 dropdownlist-->
					<view class="">全部回复</view>
					<view class="tui-drop-input-box">
						<tui-dropdown-list :show="dropdownShow" :top="86" >
							<template v-slot:selectionbox>
								<view  shape="circle" @click="dropDownList('',-1)">{{rankType.name}}
									<view class="tui-animation" :class="[dropdownShow?'tui-animation-show':'']">
										<tui-icon name="turningdown" :size="20"></tui-icon>
									</view>
								</view>
							</template>
							<template v-slot:dropdownbox>
								<view class="tui-selected-list">
									<scroll-view scroll-y class="tui-dropdown-scroll">
										<block class="rank-item" v-for="(item,index) in dropdownlistData" :key="index">
											<tui-list-cell padding="0" @tap.stop="dropDownList(item,index)" :unlined="dropdownlistData.length-1==index">
												<view class="tui-cell-class">
													<!-- <tui-icon :name="item.icon" :size="item.size" :color="item.color"></tui-icon> -->
													<text class="tui-ml-20">{{item.name}}</text>
												</view>
											</tui-list-cell>
										</block>
									</scroll-view>
								</view>
							</template>
						</tui-dropdown-list>
					</view>
					<!--下拉选择框-->
				</view>
				<!-- 排序方式 -->
				
				<view class="rank-item" v-if="rankList.length > 0" v-for="(item,index) in rankList" :key="index" @tap.stop="gouserhp(item.user.id)">
					<!-- 排名数 -->
					<view class=" icon">
						<image v-if="index == 0" src="../../../static/images/rank/first.svg" mode=""></image>
						<image v-else-if="index == 1" src="../../../static/images/rank/second.svg" mode=""></image>
						<image v-else-if="index == 2" src="../../../static/images/rank/third.svg" mode=""></image>
						<view v-else class="rank-count">{{index+1}}</view>
					</view>
					
					<!-- 右侧内容 -->
					<view class="right">
						<!-- top头像 -->
						<view class="top">
							<view class="avatar">
								<image :src="item.user.avatar" mode=""></image>
							</view>
							<view class="r-right">
								<view class="name">
									{{item.user.name}}
								</view>
								<view class="detail">
									<view class="gender">
										<image v-if="item.user.gender==1"  src="../../../static/images/user/male.svg" mode=""></image>
										<image v-if="item.user.gender==0" src="../../../static/images/user/female.svg" mode=""></image>
										<text class="address" v-if="item.user.city">{{item.user.city}}</text>
									</view>
								</view>
							</view>
						</view>
						
						<view class="desc">
							<text>打卡天数:{{item.post_days}}</text>
							<text>打卡次数:{{item.post_num}}</text>
							<text>获赞数:{{item.liked}}</text>
						</view>
					</view>
				</view>
				<!-- 没有关注用户 -->
				<view class="none" v-if="rankList == 0">
					本圈暂无人上榜喔~_~
				</view>
				
			</view>
		</view>
		
		<!-- 遮罩区 -->
		<view v-if="isShowMask" class="mask-f">
			<view class="mask" @click="clickCancle()"></view>
		</view>
		<!-- 遮罩区 -->
		
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	import card from '../../../components/common/card.vue'
	import prompt from '../../../components/content/prompt.vue'
	import {mapState} from 'vuex'
	export default {
		components: {
			card,
			prompt
		},
		data() {
			return {
				id:null, //圈子id
				mid:'',  //当前用户id
				createrid:'', //圈子创建者id
				flag:false,
				isshowbtn:false, 		//是否显示邀请用户进入圈子按钮
				unshowcirtag:true,	//是否显示某条打卡的发布圈子
				isshowcomment:true,	//card组件是否展示评论数据
				cangodetail:1,			//打卡是否能跳转到详情页
				headlines: [],			//圈子公告
				cirdetail:[],				//圈子详情数据
				cirdetailpost:[],		//圈子打卡数据
				rankList:[],				//排行榜数据
				cateList:[{name:'动态'},{name:'排行榜'}], //选项
				activeTab:0,				//当前选中选项
				
				isShowMask:false,
				rankType:{name:'次数榜 ',type:'post_num'}, //当前排序方式
				proDropData: [],
				proDropIndex: -1,
				dropdownShow: false,
				dropShow: false,
				dropdownlistData: [{
					name: "天数榜",
					type:"post_days"
				}, {
					name: "次数榜",
					type: "post_num"
				}, {
					name: "获赞榜",
					type:'liked'
				}, {
					name: "新锐榜",
					type:'rank'
				}],
				dropdownShow: false,
				modalTitle:'邀请用户进入圈子',
				
				// 分享相关字段
				share_title:'',			//分享标题
				share_cover:'',			//分享封面
				share_path:''				//分享路径
			}
		},
		
		computed:mapState(['phone','cirInfo']),
		
		async onLoad(p) {
			this.id = p.id
			await this.getCirDetail(this.id)
			await this.getMe()
			await this.isJoinCir(this.id)
			
		},
		
		async onShow() {
			await this.getCirPost(this.id)
		},
		
		async updated() {//每次显示页面都更新热门打卡
			var _that = this
			uni.$off('updateHotpostComment')
			uni.$once('updateHotpostComment',async function()  {
				await _that.getCirPost(_that.id)
			})
		},
		
		methods:{
			
			prompt:function(){//邀请用户进入圈子--弹出框
				this.$refs.customModal.showModal();
			},
			
			async onConfirm(uid){//邀请用户进入圈子--弹出框确认操作
				if(!uid) {
					uni.showToast({
						title:'用户id不能为空',
						duration:800
					})
				}else {
					let res = await api.invite2Cir(this.id,uid)
					if(res.err == 0) {
						uni.showToast({
							title:'邀请加入成功',
							duration:800,
						})
					}else {
						uni.showToast({
							title:res.msg,
							duration:800,
							icon:'none '
						})
					}
				}
			},
			
			onCancel:function(){//邀请用户进入圈子--弹出框取消操作
				// this.$refs.prompt.hide();
				// this.$refs.prompt.cost = '';
			},
			
			async getPhoneNumber (e) {//手机号授权
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							this.goPost()
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户拒绝了手机号授权') ;   
			    }
			},
			
			async getMe() {// 获取当前登录用户信息
				let res = await api.GetMe()
				this.mid = res[0].id
			},
			
			async getCirDetail(id) {//获取圈子详情	
				this.cirdetail = await api.GetCirDetail(id)
				this.share_title = this.cirdetail.share_title
				this.share_path = this.cirdetail.share_path
				this.share_cover = this.cirdetail.share_cover
				this.headlines = this.cirdetail.activities
				console.log('公告',this.headlines);
			},
			
			async getCirPost(id) {//获取圈子打卡记录
				this.cirdetailpost = await api.GetCirDetailPost(id)
			},
			
			async getCirRankList(cid,rankType) {//获取排行榜数据
				this.rankList = await api.GetCirRankList(this.id,rankType)
			},
			
			changeTab(e) {//切换当前选中选项
				this.activeTab = e
				if(this.activeTab == 0) {
					this.getCirPost(this.id)
				}else if(this.activeTab == 1) {
					this.getCirRankList(this.id,'post_num')
				}
			},
			
			goActList(id) {//跳转到活动详情页
				uni.navigateTo({
					url:'/pages/activity/comps/Detail?id='+arguments[0],	
				})
			},
			
			goPost() {//跳转到打卡页面
			
				if(!this.flag) {
					getApp().globalData.curCirid = this.cirdetail.id
					getApp().globalData.curCirname = this.cirdetail.name
					uni.reLaunch({//跳转到tabbar页面
						// url:'/pages/post/index?cirid='+this.cirdetail.id + '&cirname='+this.cirdetail.name   //非tabbar页面传参
						url:'/pages/post/index' 
					})
				}else {
					let that = this
					uni.showModal({
						// title:'加入圈子才能发布信息哦',
						content:'加入圈子才能发布信息哦~确认加入吗？',
						success: (res) => {
							if(res.confirm) {
								that.joinCir()
							}
						}
					})
				}
			},
			
			gouserhp(uid) {//进入用户homepage
				uni.navigateTo({
					url:'/pages/user/comps/my?id='+uid
				})
			},
			
			tip() {//活动为空点击事件提示
				uni.showToast({
					title:'暂无活动喔~_~',
					icon:'none'
				})
			},
			
			async joinCir() {//加入圈子
				let jres = await api.JoinCir(this.id)
				console.log(jres);
				if(jres.err == 0) {
					uni.showToast({
						title:jres.msg,
						duration:700
					})
					this.flag = !this.flag
				}
			},
			
			async quitCir() {//退出圈子
				let qres = await api.QuitCir(this.id)
				// console.log(qres);
				if(qres.err == 0) {
					uni.showToast({
						title:qres.msg,
						duration:700
					})
					this.flag = !this.flag
				}
			},
			
			async isJoinCir(id) {//查看是否已加入圈子
				let res = await api.IsJoinCir(id)
				// console.log(res);
				if(res.err == 1) {
					this.flag = !this.flag
				}
				this.isshowbtn = true
			},
			
			dropDownList(item,index) {//排行榜排序方式
				this.isShowMask = true
				if (index != -1) {
					// this.tui.toast("index：" + index)
					// console.log(item);
					this.rankType = item
					console.log(this.rankType.type);
					this.isShowMask = false
					this.getCirRankList(this.id,this.rankType.type)	
				}
				this.dropdownShow = !this.dropdownShow
				// this.isShowMask = false
			},
			
			clickCancle() {//取消遮罩效果,隐藏rank列表
				this.isShowMask = false;
				this.dropdownShow = !this.dropdownShow
			},
		},
		onShareAppMessage: function(res) {//点击右上角分享小程序
			return {
				title:this.share_title,
				path: this.share_path,
				imageUrl: this.share_cover,
			}
		},
		
		
		
	}
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}
.circle {
	height: 100vh;
	// background: #fff;
}
.tabs {
	 // border:2px solid cadetblue;
	 // box-shadow: black 0px 0px 30px 5px inset;
}
.select-tab {
	border-bottom: 4rpx solid #F3F6F5;
	background-color: #FFFFFF;
}
.prompt {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	background: transparent;
	margin: 0;
	padding: 0;
	position: fixed;
	right: 45rpx;
	border-radius: 50%;
	background: #f7b500;
	bottom: 70rpx;
	z-index: 1;
	image {
		width: 50%;
		height: 50%;
	}
}
.create {
	position: absolute;
	right: 40rpx;
	bottom: 25px;
	width: 125rpx;
	height: 65rpx;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.23);
	color: #fff;
	font-size: 28rpx; 
	align-items: center;
	display: flex;
	justify-content: center;

}
.user-info{
	position: relative;
	width: 100%;
	height: 350rpx;
	.transparent {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		background:rgba(2, 2, 2, 0.25);
	}
	
}
.cover {
	position: absolute;
	z-index: 0;
	width: 750rpx;
	height: 350rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.popup {
	z-index: 999;
}
	.base-info {	
		position: absolute;
		z-index: 2;
		width: 100%;
		height: 350rpx;
		display: flex;
		// border-bottom: 2rpx solid #F3F6F5;
		
		.user-desc {
			display: flex;
			align-items: center;
			margin-top: 120rpx;
			color: #fff;
			image {
				margin-left: 30rpx;  
				width: 150rpx;
				height: 150rpx;	
				border-radius: 10rpx;
				// border: 2rpx solid #eee;
			}
			.circle-desc {
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;
				width: 400rpx;
				// height: 145rpx;
				margin-left: 18rpx;
				.count {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #fff;
					.number {
						
					}
					.vLine {
						border-left: solid 1px #fffefe;
						height: 13px;
						margin: 0 15rpx;
						vertical-align: middle;
						display: inline-block;
					}
					.posted {
						// margin-left: 10rpx;
					}
					
				}
				.bio {
					display: -webkit-box;
					margin: 8rpx 0;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 24rpx;
				}
			}
			.name, {
				height: 45rpx;
				font-size: 34rpx;
				
			}
			
		}
		.edit {
			color: #fff;
			text-align: center;
			position: absolute;
			bottom: 55rpx;
			right: 50rpx;
			width: 130rpx;
			height: 70rpx;
			border-radius: 10rpx;
			background-color: rgba(0,0,0,.5);
		}
	}

.mask-f {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	.mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
	}
}

.tui-rolling-news {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	background: #fff;
	box-shadow: #e2e2e2 4px 4px 20px 0px inset;
	// border-bottom: 2rpx solid #F3F6F5;
}

.tui-rolling-news::after {
	left: 0;
}
.tui-swiper {
	margin-left: 8rpx;
	font-size: 28rpx;
	height: 100rpx;
	flex: 1;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}
.tui-news-item {
	line-height: 28rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #555;
}









.none-post {
	display: flex;
	height: 20vh;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: #ccc;
}

.add-post {
	width: 100rpx;
	height: 100rpx;
	background:transparent;
	margin: 0;
	padding: 0;
	position: fixed;
	right: 45rpx;
	bottom: 200rpx;
	z-index: 1;
	image {
		width: 100%;
		height: 100%;
	}
}


.none {
	display: flex;
	height: 20vh;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: #ccc;
}
.rank {
	padding: 10rpx 20rpx;
	background-color: #FFFFFF;
	.rank-manner {
		display: flex;
		justify-content: space-between;
		padding: 10rpx  25rpx;
		font-size: 32rpx;
		color: #9a9a9a;
		.tui-drop-input-box {
			color: #4d4d4d;
		}
		.tui-selected-list {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			transform: translateZ(0);
		}
		// .tui-selected-list:before {
		// 	content: " ";
		// 	font-size: 0;
		// 	line-height: 0;
		// 	margin: 0 auto;/*居中*/
		// 	display: block;/*独占一行*/
		// 	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整体一样的投影*/
		// 	// background-color: #ff1994;
		// 	width: 10px;
		// 	height: 10px;
		// 	-webkit-transform: rotate(45deg); 
		// 	transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
		// 	position: relative;
		// 	top: -5px;  /* //果断的露出上半部分 */
		// 	z-index: 2; /*果断的隐藏下半部分*/
		// 	-webkit-transition: all .2s ease-in;
		// 	transition: all .2s ease-in;
		// }
		.tui-animation {
			display: inline-block;
			transform: rotate(0deg);
			transition: all 0.2s;
		}
		
		.tui-animation-show {
			transform: rotate(180deg);
		}
	}
	.rank-item {
		border-bottom: 1rpx solid #F3F6F5;
	}
	.rank-item:nth-last-child(1) {
		border-bottom: 1rpx solid #F3F6F5;
		
	}
	.rank-item view:hover:before {
			background-color: #41b1d9;
			color: #fff;
	}

	.tui-cell-class {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		padding: 10rpx 15rpx;
		// border: 1rpx solid #F3F6F5;
		border-bottom: 1rpx solid #F3F6F5;
	}
	.rank-item {
		display: flex;
		position: relative;
		align-items: center;
		height: 120rpx;
		padding: 15rpx 10rpx;
		// background: #F3F6F5;
		// border-top: 1rpx solid #F3F6F5;
		
		.icon {
			display: inline-block;
			width: 75rpx;
			height: 75rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.rank-count {
			width:70rpx;
			text-align: center;
			font-size: 20px;
			color: #68C;
		}
		
		
		.right {
			display: flex;
			position: relative;
			flex-direction: column;
			justify-content: space-evenly;
			margin-left: 20rpx;
			.top {
				display: flex;
				align-items: center;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					image {
						width: 100%;
						height: 100%;
						// border-radius: 50%;
					}
				}
				.r-right {
					margin-left: 15rpx;
					padding: 8rpx;
					.name {
						padding: 4rpx 0;
						font-size: 30rpx;
						color: #4D6088;
					}
					.detail {
						.gender {
							height: 40rpx;
							line-height: 40rpx;
							color: #ccc;
							image {
								width: 25rpx;
								height: 25rpx;
							}
						}
						.address {
							margin-left: 6rpx;
							font-size: 26rpx;
						}
					}
				}
			}
			.desc {
				display: flex;
				padding: 5rpx 0rpx;
				font-size: 26rpx;
				color: #999;
				text {
					width: 190rpx;
					
				}
			}
		}
		
		.follow-btn {
			display: flex;
			position: absolute;
			width: 108rpx;
			align-items: center;
			justify-content: center;
			height: 50rpx;
			right: 30rpx;
			font-size: 26rpx; 
			border-radius: 10rpx;
			border: 2rpx solid #ff557f;
			// background-color: #ff557f;
			color: #ff557f;
		}
		.unfollow {
			background-color: #ff557f;
			color: #fff;
		}
	}
}
</style>
